/**
 * 图表设计js
 */

import {Util} from '@lowcode/jpaas-base-lib';
import defConfig from "@/views/modules/design/js/def-config.js";
import {defData} from "@/views/modules/design/js/static-data.js";

export default {
    data() {
        return {
            config:"",
            chartTypes: [
                {icon:'icon-colorzhuzhuangtu', title:this.componentI18n("generalBar","常规柱状图"),type:"chart",chartType:"generalBar"},
                {icon:'icon-colorh-zhuzhuangtu', title:this.componentI18n("horizontalBar","横向柱状图"),type:"chart",chartType:"horizontalBar"},
                {icon:'icon-colordj-s-zhuzhuangtu', title:this.componentI18n("stackedBar","堆积柱状图"),type:"chart",chartType:"stackedBar"},
                {icon:'icon-colorzhexiantu', title:this.componentI18n("lineChart","折线图"),type:"chart",chartType:"lineChart"},
                {icon:'icon-colorjianjitu', title:this.componentI18n("areaChart","面积图"),type:"chart",chartType:"areaChart"},
                {icon:'icon-colorduijimianjitu', title:this.componentI18n("stackedArea","堆积面积图"),type:"chart",chartType:"stackedArea"},
                {icon:'icon-colorbingtu', title:this.componentI18n("pieChart","饼图"),type:"chart",chartType:"pieChart"},
                {icon:'icon-colorhuantu', title:this.componentI18n("ringChart","环形图"),type:"chart",chartType:"ringChart"},
                {icon:'icon-colorloudoutu', title:this.componentI18n("funnelChart","漏斗图"),type:"chart",chartType:"funnelChart"},
                {icon:'icon-coloryibiaopan', title:this.componentI18n("gaugeChart","单色仪表盘"),type:"chart",chartType:"gaugeChart"},
                {icon:'icon-colorduoseyibiaopan', title:this.componentI18n("multiColorGauge","多色仪表盘"),type:"chart",chartType:"multiColorGauge"},
                {icon:'icon-colorxianzhuhunda', title:this.componentI18n("lineBar","线柱混搭"),type:"chart",chartType:"lineBar"},
                {icon:'icon-colorleidatu', title:this.componentI18n("radarMap","雷达图"),type:"chart",chartType:"radar"},
                {icon:'icon-colorzidingyitubiao', title:this.componentI18n("customChart","自定义图表"),type:"chart",chartType:"customChart"}
            ],
            viewKey:Util.randomId(),//配置变化触发重新渲染
            curComponent:{type:"chart"}
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "screenLang", key);
        },
        componentI18n(name, text, key) {
            return this.$ti18(name, text, "componentsLang", key);
        },
        initConfig(chartType){
            let defConf = Util.deepClone(defConfig[this.curComponent.type])
            this.config=Object.assign(defConf,{ key:Util.randomId(), chartType:chartType, title:this.componentI18n(chartType)});
            if(this.config.dataSources.source=="static"){
                this.config.dataSources.staticData=defData[chartType]?JSON.stringify(defData[chartType]):""
            }
            this.viewKey=Util.randomId();
        },
        setChart(chartType){
            let self=this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                zIndex: 20000,
                content:"切换后会清空配置，您确定要切换吗？",
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    self.initConfig(chartType);
                }
            })
        }
    }
}
